<template>
  <div class="share-modal" v-show="display">
    <div class="share-modal__mask"></div>
    <div class="share-modal__content">
      <ul>
        <li v-for="(item,index) in lists" :key="index">
          <img :src="item.imgUrl">
          <span>{{item.name}}</span>
        </li>
      </ul>
      <p @click="cancel">取消</p>
    </div>
  </div>
</template>
<script lang="ts">
  import Vue from 'vue'
  import Component from 'vue-class-component'
  import {Prop} from "vue-property-decorator";
  @Component

  export default class ShareModal extends Vue {
       @Prop({type:Boolean})display
       private lists=[
         {name:'微信朋友圈',imgUrl:require('../../assets/imgs/icons/moment.svg')},
         {name:'QQ空间',imgUrl:require('../../assets/imgs/icons/qq.svg')},
         {name:'微信好友',imgUrl:require('../../assets/imgs/icons/wechat.svg')}
       ]

    private cancel(){
         this.$emit('hideModal',false)
    }
  }
</script>
<style lang="scss">
  @include component(share-modal){
    grid-column: 1 / 2 span;

    @include part(mask){
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      background: rgba(0,0,0,0.5);
    }

    @include part(content){
      @include loop-breakpoints{
        height: #{$gridel-row-height * 12 + rem};
      }
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      background: $color-fff;
      transition: all 0.6s;
      display: flex;
      flex-direction: column;
      align-items: center;

      ul{
        width: 100%;
        height: 70%;
        display: flex;
        justify-content: space-around;
        border-bottom: 1px solid rgba(0,0,0,0.1);
        li{
          height: 100%;
          display: flex;;
          flex-direction: column;
          justify-content: center;

          span{
            @include baseline($font-size-0875,$skip:1){
              color: #122025;
            }
          }
        }
      }

      p{
        width: 100%;
        height: 30%;
        text-align: center;
        line-height: 260%;
      }


    }
  }
</style>
